<template>
	<i-drawer v-model="show" mode="bottom" :popup="false" @close="onCouponClose">
		<scroll-view v-if="listLen" scroll-y class="coupon-list">
			<view class="coupon-item" v-for="(item, index) in list" :key="item.id">
				<view class="coupon-item-content">
					<view class="left">
						<text class="title">{{ item.name }}</text>
						<text class="time">{{ item.use_end_time }}前使用</text>
					</view>

					<!-- <view class="right">
						<text>{{item.create_time}}</text>
					</view> -->

					<view class="circle"></view>
					<view class="circle r"></view>
				</view>

				<button class="coupon-item-btn" hover-class="hover-class" @tap.stop="selectCoupon(item)">选择</button>
			</view>
		</scroll-view>
	</i-drawer>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const emit = defineEmits(['update:modelValue', 'click'])

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	list: {
		type: Array,
		default() {
			return []
		}
	}
})

const show = ref(false)

const listLen = computed(() => props.list.length)

watch(
	() => props.modelValue,
	nVal => {
		show.value = nVal
	}
)

const selectCoupon = item => {
	emit('update:modelValue', false)
	emit('click', item)
}

const onCouponClose = () => {
	emit('update:modelValue', false)
	emit('close', {})
}
</script>

<style lang="scss" scoped>
.coupon-list {
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 20rpx;
	background-color: #f3f3f3;
	height: 720rpx;

	/* 优惠券列表 */
	.coupon-item {
		padding-bottom: 20rpx;
		margin: 20rpx 24rpx;
		background-color: #fff;

		&-btn {
			width: 400rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin: 20rpx auto 0;
			background-color: $u-error;

			&.plain {
				background-color: transparent;
				color: $u-info;
				border: 1px solid $u-info;
			}
		}

		&-content {
			display: flex;
			align-items: center;
			height: 120rpx;
			padding: 0 30rpx;
			position: relative;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}

			.circle {
				position: absolute;
				left: -6rpx;
				// bottom: -10rpx;
				top: 50%;
				transform: translate3d(0, -50%, 0);
				z-index: 10;
				width: 20rpx;
				height: 20rpx;
				background-color: #f3f3f3;
				border-radius: 100px;

				&.r {
					left: auto;
					right: -6rpx;
				}
			}

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				height: 100rpx;

				.title {
					font-size: 30rpx;
					color: $u-main-color;
					padding-bottom: 10rpx;
				}

				.time {
					font-size: 24rpx;
					color: $u-tips-color;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-content-color;
				height: 100rpx;

				.price {
					font-size: 40rpx;
					color: $u-error;

					&:before {
						content: '￥';
						font-size: 32rpx;
					}
				}
			}
		}

		.tips {
			font-size: 24rpx;
			color: $u-tips-color;
			line-height: 60rpx;
			padding-left: 30rpx;
		}
	}
}
</style>
